<template>
	<view class="content">
		<view class="header">
			<uni-search-bar radius="100" placeholder="请搜索鲜花名称" cancelButton="none" @confirm="handleSearch" />

			<uni-swiper-dot class="header-swiper" :current="currentSwiper" field="content">
				<swiper class="swiper-box" @change="changeSwiper" circular autoplay>
					<swiper-item v-for="(item ,index) in swiperData" :key="index" @click="handleSwiper(item)">
						<view class="swiper-item">
							<image :src="item.image" :alt="item.content" mode="scaleToFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view style="display: flex;align-items: center;margin: 12px;">
			<img src="/static/images/notes.png" alt="" style="width: 110px;height: 22px;" />
			<uni-notice-bar :speed="50" color="#333" scrollable background-color="rgba(0,0,0,0)"
				style="flex: 1;margin: 0;" text="同城鲜花配送, 市区1-2小时送达, 代写贺卡!" />

		</view>

		<view class="nav-icons">
			<uni-grid :column="4" :highlight="false" :show-border="false">
				<uni-grid-item v-for="(item, index) in navOptions" :key="index">
					<view class="nav-item" @click="handleClickNav(item)">
						<image class="icon" :src="item.icon" :alt="item.label" />
						<text class="text">{{ item.label }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<view class="recommend today">
			<uni-section title="今日推荐" type="line" title-font-size="20">
				<template v-slot:right>
					<view @click="toSortPage" style="color: #a7a7a5;display: flex;align-items: end;">
						<text>更多</text>
						<uni-icons type="right" :size="20" color="#a7a7a5"></uni-icons>
					</view>
				</template>

				<view class="recommend-item" v-for="item in todayRecommend" :key="item.id"
					@click="toProductDetail(item.flower.id)">
					<img class="cover" :src="getCover(item.flower.images)" :alt="item.title">
					<view class="intro">
						<view class="title">{{ item.title }}</view>
						<view class="name">{{ item.flower.name }}</view>
						<view class="tag">
							{{ item.tag }}
						</view>
						<view class="price">{{ `￥${item.flower.price}` }}</view>
					</view>
				</view>
			</uni-section>
		</view>

		<view class="recommend" v-for="recommend in homeRecommend" :key="recommend.id">
			<uni-section :title="recommend.title" type="line" title-font-size="20">
				<template v-slot:right>
					<view @click="toSortPage" style="color: #a7a7a5;display: flex;align-items: end;">
						<text>更多</text>
						<uni-icons type="right" :size="20" color="#a7a7a5"></uni-icons>
					</view>
				</template>
				<view style="display: flex;flex-wrap: wrap;justify-content: space-between;">
					<view class="recommend-item" style="width: calc(50% - 6px);margin-bottom: 12px;"
						v-for="item in recommend.children" :key="item.id" @click="toProductDetail(item.id)">
						<img class="cover" :src="getCover(item.images)" :alt="item.name">
						<view class="intro">
							<view class="name">{{ item.name }}</view>
							<view class="price">{{ `￥${item.price}` }}</view>
						</view>
					</view>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		ref
	} from "vue"

	const handleSearch = (e) => {
		if (e.value.trim()) {
			uni.navigateTo({
				url: "/pages/search/search?kw=" + e.value.trim()
			})
		}
	}

	const swiperData = ref([])
	const currentSwiper = ref(0)
	const changeSwiper = (e) => {
		currentSwiper.value = e.detail.current;
	}

	const loadSwiper = () => {
		uni.request({
			url: SERVER_URL + '/config?name=weixin-home-swiper',
			method: "GET",
			success: (res) => {
				if (res.statusCode === 200) {
					console.log(res.data.data);

					swiperData.value = res.data.data.map((item) => {
						return {
							...item,
							image: SERVER_URL + item.image
						}
					})
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	}

	const handleSwiper = (e) => {
		console.log(e)
		const params = {
			kw: e.kw ?? undefined,
			material: e.material ?? undefined,
			occasion: e.occasion ?? undefined,
			receiver: e.receiver ?? undefined,
			size: e.size ?? undefined,
			type: e.type ?? undefined,
		}
		const query = Object.keys(params).filter((key) => (params[key])).map((key) => {
			return `${key}=${params[key]}`
		}).join("&")
		console.log("/pages/search/search?" + query)
		uni.navigateTo({
			url: "/pages/search/search?" + query
		})
	}

	const navOptions = ref([{
		label: "恋爱表白",
		icon: "/static/images/icon_nav_1.png",
		filter: {
			receiver: 1
		}
	}, {
		label: "朋友生日",
		icon: "/static/images/icon_nav_2.png",
		filter: {
			receiver: 2
		}
	}, {
		label: "父母长辈",
		icon: "/static/images/icon_nav_3.png",
		filter: {
			receiver: 3
		}
	}, {
		label: "开业花篮",
		icon: "/static/images/icon_nav_4.png",
		filter: {
			occasion: 6
		}
	}])

	const handleClickNav = (e) => {
		console.log(e)
		const params = e.filter
		const query = Object.keys(params).filter((key) => (params[key])).map((key) => {
			return `${key}=${params[key]}`
		}).join("&")
		uni.navigateTo({
			url: "/pages/search/search?" + query
		})
	}

	const toSortPage = () => {
		uni.switchTab({
			url: "/pages/sort/sort"
		})
	}

	const toProductDetail = (id) => {
		uni.navigateTo({
			url: "/pages/flower/flower?id=" + id
		})
	}

	// 今日推荐
	const todayRecommend = ref([])

	const loadTodayRecommend = () => {
		uni.request({
			url: SERVER_URL + '/config/weixin-today-recommend',
			method: "GET",
			success: (res) => {
				if (res.statusCode === 200) {
					console.log(res.data);

					todayRecommend.value = res.data
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	}

	const getCover = (images) => {
		if (images && images.length > 0) {
			return SERVER_URL + images[0]
		}

		return "/static/images/flower.png"
	}

	const homeRecommend = ref([])

	const loadHomeRecommend = () => {
		uni.request({
			url: SERVER_URL + '/config/weixin-home-recommend',
			method: "GET",
			success: (res) => {
				if (res.statusCode === 200) {
					console.log(res.data);

					homeRecommend.value = res.data
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	}

	onLoad(() => {
		loadSwiper()
		loadTodayRecommend()
		loadHomeRecommend()
	})
</script>

<style scoped lang="scss">
	.content {
		background-color: #F2F6FD;

		.header {
			padding: 0 12px;
			background: linear-gradient(180deg, #F53B3C 0%, #F2F6FD 70%, #F2F6FD 100%);

			:deep(.uni-swiper__warp) {
				padding-top: 10px;
			}
		}

		.nav-icons {
			padding: 12px;

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon {
					width: 64px;
					height: 64px;
				}

				.text {
					padding: 6px 0;
				}
			}
		}

	}

	:deep(.uni-noticebar) {
		margin-bottom: 0 !important;
	}

	:deep(.uni-section) {
		background-color: transparent !important;

		.uni-section-header {
			padding: 12px 0;

			.uni-section-header__decoration.line {
				width: 6px;
				height: 20px;
				background-color: #F53B3C;
			}

			.uni-section-header__content {
				font-size: 20px;
				font-weight: 700;
			}
		}
	}

	.recommend {
		padding: 12px;

		.recommend-item {
			background-color: #fff;
			border-radius: 6px;
			overflow: hidden;

			.cover {
				width: 100%;
				height: 180px;
			}

			.intro {
				padding: 4px 6px;
				font-size: 1rem;
				line-height: 1.8;


				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.price {
					color: #ff1b1b;
				}
			}

		}
	}


	.recommend.today {
		.recommend-item {
			display: flex;
			background-color: #fff;
			margin-top: 12px;
			border-radius: 6px;
			overflow: hidden;

			.cover {
				flex-shrink: 0;
				width: 144px;
				height: 144px;
			}

			.intro {
				flex: 1;
				overflow: hidden;
				padding: 12px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;


				.title {
					font-weight: 700;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.tag {
					background-color: #ffbbbb;
					color: #ff1b1b;
					width: fit-content;
					padding: 2px 12px;
					line-height: 20px;
					border-radius: 12px;
					border-top-left-radius: 0;
				}

				.price {
					color: #ff1b1b;
					font-size: 1.25rem;
				}
			}
		}

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.swiper-box {
		height: 180px;
		border-radius: 6px;
		overflow: hidden;

		.swiper-item {
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>